<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Themes - Steps</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">

  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  <style>
    .block {
      display: inline-block;
      height: 60px;
      width: 150px;
    }

    .background-step-50 {
      background: var(--ion-color-step-50, #f2f2f2);
    }

    .background-step-100 {
      background: var(--ion-color-step-100, #e6e6e6);
    }

    .background-step-150 {
      background: var(--ion-color-step-150, #d9d9d9);
    }

    .background-step-200 {
      background: var(--ion-color-step-200, #cccccc);
    }

    .background-step-250 {
      background: var(--ion-color-step-250, #bfbfbf);
    }

    .background-step-300 {
      background: var(--ion-color-step-300, #b3b3b3);
    }

    .background-step-350 {
      background: var(--ion-color-step-350, #a6a6a6);
    }

    .background-step-400 {
      background: var(--ion-color-step-400, #999999);
    }

    .background-step-450 {
      background: var(--ion-color-step-450, #8c8c8c);
    }

    .background-step-500 {
      background: var(--ion-color-step-500, gray);
    }

    .background-step-550 {
      background: var(--ion-color-step-550, #737373);
    }

    .background-step-600 {
      background: var(--ion-color-step-600, #666666);
    }

    .background-step-650 {
      background: var(--ion-color-step-650, #595959);
    }

    .background-step-700 {
      background: var(--ion-color-step-700, #4d4d4d);
    }

    .background-step-750 {
      background: var(--ion-color-step-750, #404040);
    }

    .background-step-800 {
      background: var(--ion-color-step-800, #333333);
    }

    .background-step-850 {
      background: var(--ion-color-step-850, #262626);
    }

    .background-step-900 {
      background: var(--ion-color-step-900, #1a1a1a);
    }

    .background-step-950 {
      background: var(--ion-color-step-950, #0d0d0d);
    }

    .text-step-50 {
      color: var(--ion-color-step-950, #0d0d0d);
    }

    .text-step-100 {
      color: var(--ion-color-step-900, #1a1a1a);
    }

    .text-step-150 {
      color: var(--ion-color-step-850, #262626);
    }

    .text-step-200 {
      color: var(--ion-color-step-800, #333333);
    }

    .text-step-250 {
      color: var(--ion-color-step-750, #404040);
    }

    .text-step-300 {
      color: var(--ion-color-step-700, #4d4d4d);
    }

    .text-step-350 {
      color: var(--ion-color-step-650, #595959);
    }

    .text-step-400 {
      color: var(--ion-color-step-600, #666666);
    }

    .text-step-450 {
      color: var(--ion-color-step-550, #737373);
    }

    .text-step-500 {
      color: var(--ion-color-step-500, gray);
    }

    .text-step-550 {
      color: var(--ion-color-step-450, #8c8c8c);
    }

    .text-step-600 {
      color: var(--ion-color-step-400, #999999);
    }

    .text-step-650 {
      color: var(--ion-color-step-350, #a6a6a6);
    }

    .text-step-700 {
      color: var(--ion-color-step-300, #b3b3b3);
    }

    .text-step-750 {
      color: var(--ion-color-step-250, #bfbfbf);
    }

    .text-step-800 {
      color: var(--ion-color-step-200, #cccccc);
    }

    .text-step-850 {
      color: var(--ion-color-step-150, #d9d9d9);
    }

    .text-step-900 {
      color: var(--ion-color-step-100, #e6e6e6);
    }

    .text-step-950 {
      color: var(--ion-color-step-50, #f2f2f2);
    }

  </style>
</head>

<body>
  <ion-app>
    <ion-content class="ion-padding">
      <div class="block">Background</div>
      <div class="block background-step-50">Step 50</div>
      <div class="block background-step-100">Step 100</div>
      <div class="block background-step-150">Step 150</div>
      <div class="block background-step-200">Step 200</div>
      <div class="block background-step-250">Step 250</div>
      <div class="block background-step-300">Step 300</div>
      <div class="block background-step-350">Step 350</div>
      <div class="block background-step-400">Step 400</div>
      <div class="block background-step-450">Step 450</div>
      <div class="block background-step-500">Step 500</div>
      <div class="block background-step-550">Step 550</div>
      <div class="block background-step-600">Step 600</div>
      <div class="block background-step-650">Step 650</div>
      <div class="block background-step-700">Step 700</div>
      <div class="block background-step-750">Step 750</div>
      <div class="block background-step-800">Step 800</div>
      <div class="block background-step-850">Step 850</div>
      <div class="block background-step-900">Step 900</div>
      <div class="block background-step-950">Step 950</div>
      <hr>

      <div class="block">Text</div>
      <div class="block text-step-50">Step 50</div>
      <div class="block text-step-100">Step 100</div>
      <div class="block text-step-150">Step 150</div>
      <div class="block text-step-200">Step 200</div>
      <div class="block text-step-250">Step 250</div>
      <div class="block text-step-300">Step 300</div>
      <div class="block text-step-350">Step 350</div>
      <div class="block text-step-400">Step 400</div>
      <div class="block text-step-450">Step 450</div>
      <div class="block text-step-500">Step 500</div>
      <div class="block text-step-550">Step 550</div>
      <div class="block text-step-600">Step 600</div>
      <div class="block text-step-650">Step 650</div>
      <div class="block text-step-700">Step 700</div>
      <div class="block text-step-750">Step 750</div>
      <div class="block text-step-800">Step 800</div>
      <div class="block text-step-850">Step 850</div>
      <div class="block text-step-900">Step 900</div>
      <div class="block text-step-950">Step 950</div>
    </ion-content>
  </ion-app>
</body>

</html>
